import React from 'react';
import { connect } from 'dva'
import moment from 'moment'

import Title from 'components/Title'
import Chart from 'components/Chart'
import { List2Abstract } from 'components/Abstract'

import { config } from 'utils';
const { scada } = config;
const { DdToken } = scada;

@connect(({ watermeter }) => ({ ...watermeter }))
class StatisticsMeter extends React.Component {
    echartsConf = [{
        chart: {
            type: 'Pie', dataSource: 'RealtimeMeter3ResourceUnique_statistics',
            other: { formatType: 'onlyPercent' },
            color: ['#4482ff', '#e73e3e'],
            columns: { name: '', field: [{ name: 'name', value: 'value' }] }
        },
        legend: { isShow: false }, // 自定义legend
        server: { type: 'watermeter/queryRealtimeMeter3', payload: { Token: DdToken, type: 'Unique_statistics' } },
    }, {
        dataSource: 'RealtimeWater3ResourceUnique_statistics',
        columns: [
            { label: '异常量(块)', field: 'alarms' },
            { label: '结算流量计总量(块)', field: 'big' },
            { label: '水表总量(块)', field: 'total' },
        ],
        server: { type: 'watermeter/queryRealtimeWater3', payload: { Token: DdToken, type: 'Unique_statistics' } }
    }];

    componentDidMount() {
        this.init();
    }

    init = () => {
        this.setDateECharts()
    }

    // 图表
    setDateECharts = () => {
        this.echartsConf.map(ele => {
            const { server } = ele;
            this.queryServer(server);
        })
    }
    // 处理echarts配置请求
    queryServer = async (server) => {
        let { payload } = server;
        Object.assign(server, { payload })
        await this.props.dispatch(server);
    }

    RealtimeWater = (resource) => {
        let total = 0;
        let alarms = 0;
        let succ = 0;
        if (Array.isArray(resource)) {
            for (let i = 0; i < resource.length - 1; i++) {
                const ele = resource[i];
                total += ele['v'];
                alarms += ele['alarms'];
            }
            succ = total - alarms;
        }
        return { total, alarms, succ };
    }

    // 图表渲染
    render() {
        const { props, echartsConf } = this;
        const { type: chartType, dataSource, color, columns, other } = echartsConf[0].chart;

        const Resource = this.RealtimeWater(props[dataSource]);
        const { alarms, succ } = Resource;
        // 图表
        const chartResource = [{ name: '异常', value: alarms }, { name: '正常', value: succ }]
        // 列表
        const { dataSource: l_dataSource, columns: l_columns } = echartsConf[1];
        
        let big = 0;
        let total = 0;
        if(Array.isArray(props[l_dataSource])){
            [ , big, total ] = props[l_dataSource];
        }
        const l_Resource = { alarms, big, total }
        return (<Title title={'水表异常分析'}>
            <Chart
                type={chartType}
                color={color}
                columns={columns}
                dataSource={chartResource}
                other={other}
            />
            <List2Abstract dataSource={l_Resource} columns={l_columns} />
        </Title>)
    }
}

export default StatisticsMeter;
